<template>
	<div class="form">
		<form >
			<p :class="{'default' : num1==1}">
				<input type="phone" placeholder="请输入手机号" id="one" v-model.lazy.trim="list.phone" @blur="shouji()"/>
			</p>
			<p :class="{'default' : num2==2}">
				<input type="number" placeholder="请输入验证码" id="two" v-model.lazy.trim="list.number" @blur="yanzheng()"/>
				<button type="button" @click="yz()">获取验证码</button>
			</p>
			<aside>
				<input type="button" value="一键注册/登录" @click="btn()" :disabled="!show" />
			</aside>
			<aside>
				<span class="left">
					<button type="button" @click="D1()">非大陆手机号登录</button>
				</span>
				<span class="right">
					<button type="button" @click="D2()">账号登录</button>
				</span>
			</aside>
		</form>
		<div class="form_bottom">
			<p>
				<img src="../../../../public/ddimg/wx.png" />
				<img src="../../../../public/ddimg/logo.png" />
			</p>
		</div>
		<div class="font">
			<p>
				<input type="checkbox" @click="pan()" v-model="ui"/><span>未注册游侠客账号的手机，登录时将同时注册，登录代表您已同意</span><em>《服务协议》</em>和<em>《隐私政策》</em>
			</p>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Form',
		data(){
			return{
				show:0,
				ui:false,
				list:{
					phone:'',
					number:'',
				},
				num1:0,//判断表单是否正确
				num2:0,
				nu:0,//接受验证码的值
				bol:'',//接受手机号的boolean值
				boll:'',//接受验证码的boolean值
			}
		},
		methods:{
			btn(){
				if(this.list.phone!='' && this.list.number!=''){
					if(this.boll===true && this.bol===true){
						localStorage.hello = 0
						localStorage.valu = this.list.phone
						this.$router.push("/Order_data")
						
					}
					
				
					
				}
			},
			D1(){
				//通过js来设置文本框input的placeholder值
				document.getElementById("one").setAttribute("placeholder","请输入邮箱/手机号");
				document.getElementById("two").setAttribute("placeholder","请输入验证码");
			},
			D2(){
				//通过js来设置文本框input的placeholder值
				document.getElementById("one").setAttribute("placeholder","请输入手机号/邮箱");
				document.getElementById("two").setAttribute("placeholder","请输入验证码");
			},
			pan(){
				if(this.ui){
					//真
					this.show=0//false
				}else{
					//假
					this.show=1//true
				}
			},
			yz(){
				var sum = '';
				let num = [1,2,3,4,5,6,7,8,9,0];
				let arr = [...num];
				for(let i =1 ; i<=4 ; i++){
					let index = Math.floor(Math.random()*arr.length)
					sum+=arr[index]
				}
				this.nu=sum
				alert('验证码为:'+sum)
				
			},
			shouji(){
				let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				let reg1=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if(reg.test(this.list.phone)||reg1.test(this.list.phone)){
					this.num1=0;
					this.bol=true;
				}else{
					this.num1=1;
					this.bol=false;
					
				}
				
			},
			yanzheng(){
				
				if(this.nu==this.list.number){
					this.num2=0;
					this.boll=true;
				}else{
					this.num2=2;
					this.boll=false;
					
				}
			}
		},
		
	}
</script>

<style scoped>
	.form{
		width: 100%;
		height: 20rem;
	}
	.form p{
		margin: 0 auto;
		width: 90%;
		line-height: 3rem;
		margin-top: 1rem;
		background-color: #fbfbfb;
	}
	.default {
		border-bottom: 0.1rem solid red;
	}
	/* .red2 .default{
		border-bottom: 0.1rem solid red;
	} */
	
	.form p input[type="phone"]{
		border: none;
		width:99%;
		line-height: 3rem;
		text-indent: 1rem;
		background-color: #fbfbfb ;
		outline: none;
	}
	.form p input[type="number"]{
		border: none;
		width:69%;
		line-height: 3rem;
		text-indent: 1rem;
		background-color: #fbfbfb ;
		outline: none;/* 声明中设置所有的轮廓属性 */
	}
	.form p button{
		border: none;
		width:29%;
		line-height: 1rem;
		text-indent: 1rem;
		background-color: #fbfbfb ;
		color: goldenrod;/* 声明中设置所有的轮廓属性 */
	}
	.form aside{
		margin: 0 auto;
		width: 90%;
		line-height: 4rem;
		margin-top: 1rem;
	}
	.form aside input[type="button"]{
		width:100%;
		height: 2rem;
		background-image: linear-gradient(to right, #ffeb57 , #ffd10f );
		border: none;
		border-radius: 1rem;
	}
	.form aside .left button{
		line-height: 1rem;
		float: left;
		border: none;
		background-color: white;
		color: gray;
	}
	.form aside .right button{
		line-height: 1rem;
		float: right;
		border: none;
		background-color: white;
		color: gray;
	}
	.form .form_bottom{
		height: 7rem;
		
	}
	.form .form_bottom p{
		margin-top:4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
		margin-bottom: 10rem;
	}
	.form .form_bottom img{
		padding-left: 1rem;
		padding-right: 1rem;
		margin-top: 2rem;
		width: 3rem;
		background-color: #ffffff;
	}
	.form .font{
		height: 10rem;
	}
	.form .font p{
		line-height: 2rem;
		background-color: white;
	}
	.form .font input[type="checkbox"]{
		width: 1rem;
		height: 1rem;
	}
	.form .font span{
		color: #808080;
		background-color: white;
	}
</style>
